<template>
   <div class="header-tabs">
       <iscroll-view ref="scrollView" class="scroll-view sub-tabs-area" :options="{scrollX: true,preventDefault: false}" :scrollerClass="{'scroller':true}">
           <span class="tab-item"
                 v-for="(item, index) in config.sub.arr"
                 v-bind:class="{active: index === config.sub.activeIndex, 'has-not-read-msgs': item.notReadNum > 0}"
                 @click="config.sub.activeIndex = index;selectSubTypeFn(item.id)">{{ item.cn_name }}</span>
       </iscroll-view>
   </div>
</template>
<script>
    export default{
        props: ['name', 'config', 'selectSubTypeFn'],
        updated () {
            this.$refs.scrollView.refresh()
        },
        data () {
            return {}
        }
    }
</script>
<style  lang="scss">
    @import "../assets/base";
    .header-tabs{
        padding: 0 rpx(70) 0 rpx(40);
        position: relative;
        z-index: 1;
    }
    .sub-tabs-area{
        touch-action: none;
        //background-color: #fff;
        -webkit-transform:translate3d(0,0,0);
        overflow: hidden;
        z-index: 1;
        .scroller, ul.tabs{
            display: inline-flex;
            align-items: center;
            height: rpx(100);
            .tab-item{
                position: relative;
                margin-right: rpx(30);
                line-height: rpx(100);
                height: rpx(100);
                font-size: rpx(34);
                color: $color5;
                white-space: nowrap;
                &.has-not-read-msgs:before{
                    position: absolute;
                    top: rpx(18);
                    right: rpx(10);
                    display: block;
                    content: '';
                    background-color: $color3;
                    width: rpx(12);
                    height: rpx(12);
                    border-radius: 100%;
                }
                &.active{
                    color: $color3;
                    &:after {
                        position: absolute;
                        bottom: 0;
                        display: block;
                        content: '';
                        width: 100%;
                        height: rpx(4);
                        background:  $color3;
                    }
                }
                &:nth-last-child(1){
                    margin-right: 0;
                }
            }
        }
    }
</style>